<template>
	<div class="home">
		<jiess :setup="setup"></jiess>
	</div>
</template>

<script setup>
	import { ElButton } from 'element-plus';

	function setup() {
		let level = 1;
		const area = this.area({
			header: '无限弹框示例'
		});
		const dialog = this.dialog();
		const config = (show) => ({
			title: `当前层级【第${level++}层】`,
			children: [
				this.render({
					is: ElButton,
					children: '新弹出一层',
					onClick: () => dialog.open(config)
				}),
				this.render({
					is: ElButton,
					children: '关闭当前层',
					onClick: () => show.value = false
				}),
				this.render({
					is: ElButton,
					children: '关闭最上层',
					onClick: () => dialog.close()
				}),
				this.render({
					is: ElButton,
					children: '关闭所有层',
					onClick: () => {
						level = 1;
						dialog.closeAll();
					},
				})
			]
		});
		area.add(
			this.render({
				is: ElButton,
				type: 'primary',
				children: '开启无限弹框',
				onClick: () => dialog.open(config),
			}),
		).done();
	}
</script>